<template>
  <div class="login-container">
    <div class="content">
      <Row class="top">
        <img :src="imageTitle" height="86px" width="118px" />
        <span> | 风险调度管理系统</span>
      </Row>
      <div class="for-form">
        <Form
          ref="loginForm"
          style="background-color:rgb(67, 123, 227, 0.5);
              border-radius: 10px; -webkit-border-radius: 10px;-moz-border-radius: 10px;width: 400px;height: 255px"
          :model="form"
          @keydown.enter.native="onSubmit"
        >
          <FormItem prop="username">
            <Input v-model="form.username" placeholder="用户名为身份证或手机号">
              <span slot="prepend">
                <Icon :size="16" type="ios-person"></Icon>
              </span>
            </Input>
          </FormItem>
          <FormItem prop="password">
            <Input
              type="password"
              v-model="form.password"
              placeholder="请输入密码"
            >
              <span slot="prepend">
                <Icon :size="14" type="md-lock"></Icon>
              </span>
            </Input>
          </FormItem>
          <FormItem prop="ercode" v-show="false">
            <Row>
              <Col span="14">
                <Input v-model="form.ercode" placeholder="请输入验证码" />
              </Col>
              <Col span="8" offset="2">
                <img src="" alt="" width="100%" />
              </Col>
            </Row>
          </FormItem>
          <!-- <FormItem prop="tel" v-show="false">
          <Input v-model="form.tel" placeholder="请输入手机号">
            <span slot="prepend">
              <Icon :size="14" type="md-lock"></Icon>
            </span>
          </Input>
        </FormItem>
        <FormItem prop="ercode" v-show="false">
          <Row>
            <Col span='14'>
              <Input v-model="form.ercode" placeholder="请输入验证码" />
            </Col>
            <Col span="8" offset="2">
              <a style="text-decoration-line: underline;">发送验证码</a>
            </Col>
          </Row>
        </FormItem> -->
          <FormItem
            style="margin-bottom: 0px;
    margin-top: 30px;"
          >
            <Button @click="onSubmit" type="primary" long>登录</Button>
          </FormItem>

          <!-- <Col span="12"
                   class="text-center pointer">使用短信登录</Col>
              <Col span="12"
                   class="text-center pointer">使用密码登录</Col> -->
          <!-- <Col span="8"
                   offset="16"
                   class="text-center pointer"><span @click="modal = true">忘记密码</span></Col> -->
        </Form>
      </div>
      <Modal v-model="modal" width="360">
        <p slot="header" style="color:#2d8cf0;text-align:center">
          <span>提示</span>
        </p>
        <div style="text-align:center">
          <p>请联系管理员进行密码修改</p>
        </div>
        <div slot="footer" style="text-align:center">
          <Button type="primary" @click="modal = false">确定</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import CryptoJS from 'crypto-js/crypto-js'
import { mapMutations, mapActions } from 'vuex'
import imageTitle from '@/assets/images/login-title.png'
import {
  getNewTagList,
  setTagNavListInLocalstorage,
  setMenuInLocalstorage,
  setButtonInLocalstorage,
  setUserInLocalstorage
} from '@/libs/util'
export default {
  data() {
    return {
      form: {
        username: 'ssjjt',
        password: '123456',
        ercode: ''
      },
      imageTitle,
      buttonList: [],
      modal: false
    }
  },
  computed: {
    tagNavList() {
      return this.$store.state.app.tagNavList
    }
  },
  methods: {
    ...mapMutations(['setTagNavList']),

    onSubmit() {
      let password = this.encrypt(this.form.password)

      this.$api.user
        .login({ username: this.form.username, password: password })
        .then(res => {
          //登录
          if (res.code === 200) {
            Cookies.set('token', res.data)
            this.$api.user.getUserDetail().then(res => {
              if (res.code == 200) {
                setUserInLocalstorage(res.data)
                //this.checkPerson();
              }
            })
            this.$api.user.getMenu(res.data).then(res => {
              let buttonList = []
              let menuList = this.changeData(res.data)
              setMenuInLocalstorage(menuList)
              setButtonInLocalstorage(this.buttonList)
              this.setTagNavList(
                getNewTagList(this.tagNavList, {
                  name: 'home',
                  params: {},
                  query: {},
                  meta: {
                    hideInMenu: false,
                    title: '欢迎页',
                    notCache: true,
                    icon: 'md-home'
                  }
                })
              )
              this.$router.push({ path: '/work' })
            })
          } else {
            this.$Message.error(res.message)
          }
        })
    },

    changeData(arr) {
      //改变菜单格式
      arr.forEach(item => {
        let name = item.name
        item.meta = {
          title: name,
          showAlways: true
        }
        item.name = item.href ? item.href : item.defaultIcon
        item.icon = item.defaultIcon || 'e'

        if (item.children.length > 0 && item.children[0].type == 1) {
          this.changeData(item.children)
        } else if (item.children.length > 0 && item.children[0].type == 2) {
          let obj = {}
          obj[item.href] = item.children
          this.buttonList.push(obj)
          delete item.children
        } else {
          delete item.children
        }
      })
      return arr
    },
    encrypt(word) {
      //加密
      var key = CryptoJS.enc.Utf8.parse('AZB_AES_PASSWORD')
      var srcs = CryptoJS.enc.Utf8.parse(word)
      var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      })
      return encrypted.toString()
    },
    forgetPass() {}
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(..\..\assets\images\bg.png) no-repeat;
  background-size: 100% 100%;
  .content {
    position: absolute;
    top: 50%;
    transform: translateY(-65%);
    left: calc(50% - 225px);
    .for-form {
      width: 400px;
      height: 300px;
      margin-top: 100px;
      text-align: center;
      margin-left: 22px;
    }
  }
  .ivu-form {
    box-sizing: border-box;
    padding: 55px 50px;
    //margin-top: -200px;
    width: 450px;
    height: auto;
    border: 1px solid rgba(85, 85, 85, 0.4);
  }
  h1 {
    margin-bottom: 20px;
  }
  .top {
    height: 45px;
    line-height: 45px;
    text-align: center;
    margin-bottom: 50px;
    font-weight: bold;
    color: #fff;
    font-size: 24px;
    span {
      position: relative;
      top: -10px;
      font-size: 38px;
      font-family: 'PingFangSC-Semibold', 'Microsoft YaHei';
    }
  }
}
.text-center {
  text-align: center;
  color: white;
}
.pointer {
  cursor: pointer;
}
</style>
